<template>
  <div style="padding: 0 0.2rem">
    <echarts
      :chartStyle="{
        height: '2.3rem',
      }"
      :option="option"
    ></echarts>
  </div>
</template>
<script>
import { Echarts } from "../components";

import { mountComponent } from "@/utils";
import DefaultTooltip from "../tooltip/default.vue";
export default {
  components: {
    Echarts,
  },
  data() {
    return {
      option: {},
      chartData: [],
      colorList: [],
    };
  },
  mounted() {
    this.initOption();
  },
  methods: {
    initOption() {
      this.option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "transparent",
          padding: 0,
          borderWidth: 0,
          formatter: (params) => {
            return mountComponent(DefaultTooltip, {
              props: { data: params.data.extra },
            }).$el;
          },
        },
        animationDurationUpdate: function (idx) {
          // 越往后的数据延迟越大
          return idx * 100;
        },
        animationEasingUpdate: "bounceIn",
        color: ["#fff", "#fff", "#fff"],
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: 500,
              edgeLength: 10,
            },
            roam: true,
            symbolSize: 50,
            label: {
              normal: {
                show: true,
              },
            },
            data: [
              {
                // name: "生菜\n\n1次",
                value: 1,
                // symbolSize: 40,
                draggable: true,
                itemStyle: {
                  normal: {
                    color: "#1D84FD",
                  },
                },
              },
              {
                name: "章鱼爪\n\n1次",
                value: 1,
                // symbolSize: 50,
                draggable: true,
                itemStyle: {
                  normal: {
                    color: "#1D84FD",
                  },
                },
              },
              {
                name: "水产",
                value: 2,
                // symbolSize: 60,
                draggable: true,
                itemStyle: {
                  normal: {
                    color: "#1D84FD",
                  },
                },
              },
              {
                name: "品种选教",
                value: 2,
                // symbolSize: 60,
                draggable: true,
                itemStyle: {
                  normal: {
                    color: "#1D84FD",
                  },
                },
              },
              {
                name: "病虫害防治",
                value: 3,
                // symbolSize: 40,
                draggable: true,
                itemStyle: {
                  normal: {
                    color: "#1D84FD",
                  },
                },
              },
            ],
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped></style>
